<template>
  <div class="page-container">
    <SearchPanel @change="handleSearchPanelChange">
      <el-form
        class="query-more-form"
        size="mini"
        label-width="100px"
        :model="form"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="事件id">
              <el-input
                v-model="form.caseCode"
                class="search-ipt"
                placeholder="请输入事件id"
                maxlength="255"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间区间">
              <el-date-picker
                prop="reportTime"
                v-model="form.reportTime"
                type="datetimerange"
                size="mini"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="4" class="btn-col">
            <el-button
              size="mini"
              class="search-btn"
              type="primary"
              @click="handleQuery"
              >查询</el-button
            >
            <el-button
              size="mini"
              class="reset-btn"
              type="primary"
              @click="clearQuery"
              >重置</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </SearchPanel>

    <div class="table-container">
      <div class="table-tools-panel table-flex-row">
        <!-- <el-button
          class="flush-btn"
          size="mini"
          icon="el-icon-refresh"
          @click="() => handleRefresh()"
          >刷新</el-button
        > -->

        <!-- 超期按钮 -->
        <div class="overTime">
          <el-button
            size="medium"
            :type="statusType == 0 ? 'warning' : ''"
            @click="overTime(0)"
            >所有</el-button
          >
          <el-button
            size="medium"
            :type="statusType == 2 ? 'warning' : ''"
            @click="overTime(2)"
            >已登记</el-button
          >
          <el-button
            size="medium"
            :type="statusType == 1 ? 'warning' : ''"
            @click="overTime(1)"
            >未登记</el-button
          >
        </div>
      </div>
      <div class="table-list-panel">
        <el-table
          ref="table"
          v-loading="tableLoading"
          size="small"
          border
          :data="tableData"
          :height="isShow ? 'calc(100vh - 450px)' : 'calc(100vh - 400px)'"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="45" fixed="left" />
          <!-- <el-table-column
            prop="overFlag"
            label="超时"
            show-overflow-tooltip
            width="70"
          >
            <template slot-scope="scope">
              <div class="overFlagBox">
                <img
                  src="@/assets/images/images1/icon1.png"
                  alt=""
                  v-if="scope.row.overFlag == '已超期'"
                />
                <img
                  src="@/assets/images/images1/icon3.png"
                  alt=""
                  v-if="scope.row.overFlag == '未超期'"
                />
                <img
                  src="@/assets/images/images1/icon2.png"
                  alt=""
                  v-if="scope.row.overFlag == '即将超期'"
                />
                {{ scope.row.overFlag }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="案件编号"
            show-overflow-tooltip
            width="150"
          />
          <el-table-column
            prop="superviseFlag"
            label="督办"
            show-overflow-tooltip
            width="70"
          >
            <template slot-scope="scope">
              <div class="supervise" @click="superviseList(scope.row.code)">
                <span v-if="scope.row.superviseFlag != null"
                  >督办 {{ scope.row.superviseFlag }} 次</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="sourceName"
            label="案件来源"
            show-overflow-tooltip
            width="100"
          />
          <el-table-column prop="labels" label="标签集" show-overflow-tooltip />
          <el-table-column
            prop="nodeNowName"
            label="当前办理环节"
            show-overflow-tooltip
          />
          <el-table-column
            prop="nodeNowDept"
            label="当前办理单位"
            show-overflow-tooltip
          />

          <el-table-column
            prop="reportTime"
            label="上报时间"
            show-overflow-tooltip
            sortable
            width="130"
          >
            <template slot-scope="scope">
              <div>
                {{ parseTime(scope.row.reportTime) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="categoryCompleteName"
            label="权责清单全称"
            show-overflow-tooltip
          />
          <el-table-column
            prop="categoryName"
            label="权责清单"
            show-overflow-tooltip
          />

          <el-table-column
            prop="addressDetailedUser"
            label="地址"
            show-overflow-tooltip
          /> -->
          <el-table-column prop="code" label="事件id" show-overflow-tooltip />
          <el-table-column
            prop="title"
            label="工单标题"
            show-overflow-tooltip
          />
          <el-table-column prop="type" label="工单类型" show-overflow-tooltip />
          <el-table-column
            prop="sourceName"
            label="来源名称"
            show-overflow-tooltip
          />
          <el-table-column
            prop="categoryCompleteName"
            label="权责清单"
            show-overflow-tooltip
          />
          <el-table-column
            prop="reportTime"
            label="地址"
            show-overflow-tooltip
          />
          <el-table-column label="操作" width="90" fixed="right">
            <template slot-scope="scope">
              <el-button
                class="table-inner-btn"
                type="text"
                size="mini"
                @click.native="handleDetail(scope.row)"
                >详情</el-button
              >
              <el-button
                class="table-inner-btn"
                :disabled="scope.row.currentStatus >= 8"
                type="text"
                size="mini"
                @click.native="handleUpdate(scope.row)"
                >流程</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-panel">
          <Pagination
            :total="query.total"
            :page.sync="query.pageNum"
            :limit.sync="query.pageSize"
            @pagination="getQueryAllListData"
          />
        </div>
      </div>
    </div>

    <!-- 弹窗框 -->
    <TaskHistoryDialog
      custom-class="custom-dialog"
      @closeDialog="dispatchDialogVisible = false"
      :dialogVisible="dispatchDialogVisible"
      :case-code="caseCode"
    />

    <!-- 督办弹窗框 -->
    <SuperviseListDialog
      custom-class="custom-dialog"
      @closeDialog="SuperviseListDialog = false"
      :dialogVisible="SuperviseListDialog"
      :case-code="caseCode"
    />
  </div>
</template>

<script>
import SearchPanel from "@/components/SearchPanel";
import Pagination from "@/components/Pagination";
import Case from "@/components/case";
import SuperviseListDialog from "@/views/casedeal/components/superviseListDialog";
import { parseTime } from "@/utils/index";
import TaskHistoryDialog from "@/views/casedeal/components/taskHistoryDialog";
import {
  categoryType,
  industryArea,
  region,
  caseMessage,
  getAllMessage,
  queryCaseLise,
} from "@/api/case.js";
import { getList } from "@/api/law/apelist";
export default {
  name: "CaseDealList",
  components: {
    Pagination,
    SearchPanel,
    TaskHistoryDialog,
    Case,
    SuperviseListDialog,
  },
  data() {
    return {
      dispatchDialogVisible: false,
      SuperviseListDialog: false,
      obj: null,
      dialogType: "add",
      tableLoading: false,
      SourceTypeArr: [], // 来源
      IndustryAreaArr: [], //行业领域所有
      TitleOfPowerArr: [], //权力名称下拉框
      ChecklistArr: [], //事项清单下拉框
      statusType: 0,
      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        sourceCode: "",
        caseCode: "",
        categoryDcaCode: "",
        categorySupCode: "",
        categorySubCode: "",
        overFlag: null,
        status: 0,
        id: "",
        beginTime: "",
        endTime: "",
      },
      tableData: [],
      caseCode: "",
      isShow: true,
      form: {
        reportTime:[]
      },
    };
  },
  created() {
    this.initData();

    // 调用行业领域的接口
    this.getIndustryArea();

    // 调用获取来源类型的接口
    this.getSourceMessage();
  },
  methods: {
    parseTime,
    selectionChange(selection) {},
    handleSearchPanelChange(flag) {
      this.isShow = flag;
    },

    // 登记过滤
    overTime(val) {
      this.query.status = val;
      this.statusType = val;
      this.getQueryAllListData(this.query);
    },

    // 督办列表
    superviseList(val) {
      this.SuperviseListDialog = true;
      this.$bus.emit("getsuperviseList", val);
    },
    // 查询所有案件信息
    getQueryAllListData(query) {
      this.tableLoading = true;

      queryCaseLise(query)
        .then((result) => {
          let { rows, code, total } = result;
          let obj = {};
          if (code == 200) {
            this.tableData = rows;
            // console.log(rows);
            // 计算超时
            this.tableData.forEach((item) => {
              if (item.overFlag == 0) {
                item.overFlag = "未超期";
              } else if (item.overFlag == 1) {
                item.overFlag = "已超期";
              } else {
                let time = Date.parse(new Date()) / 1000;
                if (time > item.planCompletionTime) {
                  item.overFlag = "已超期";
                } else if (time * 0.8 > item.planCompletionTime) {
                  item.overFlag = "即将超期";
                } else {
                  item.overFlag = "未超期";
                }
              }
            });
            this.query.total = total;
          }
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    // 获取行业领域
    getIndustryArea() {
      industryArea({ parentId: 0 })
        .then((result) => {
          let { rows } = result;
          this.IndustryAreaArr = rows;
        })
        .catch({});
    },

    // 获取来源类型
    getSourceMessage() {
      categoryType({
        sysGroup: "caseSource",
      })
        .then((result) => {
          let { rows } = result;
          this.SourceTypeArr = rows;
        })
        .catch({});
    },

    // 行业领域的change事件
    industryChange(val) {
      industryArea({ parentId: val })
        .then((res) => {
          this.TitleOfPowerArr = res.rows;
        })
        .catch(() => {});
    },

    // 权力名称的change事件
    powerChange(val) {
      industryArea({ parentId: val })
        .then((res) => {
          this.ChecklistArr = res.rows;
        })
        .catch(() => {});
    },

    // 刷新
    handleRefresh() {
      this.clearQuery();
      this.getQueryAllListData();
    },
    // 流程
    handleUpdate(row) {
      this.caseCode = row.id;
      this.dispatchDialogVisible = true;
    },
    initData() {
      const query = JSON.parse(JSON.stringify(this.query));
      this.getQueryAllListData(query);
    },
    // 详情
    handleDetail(row) {
      sessionStorage.setItem("flushBackUrl", "/caseDetail/caseDetail3");
      this.$router.push({
        name: "CaseDetail3",
        params: {
          caseCode: String(row.id),
          dialogType: "detail",
          buttonDisable: false,
        },
      });
    },

    // 顶部查询按钮
    handleQuery() {
      this.query.id = this.form.caseCode;
      if (this.form.reportTime.length>0) {
        this.query.beginTime =
          new Date(this.form.reportTime[0]).getTime() / 1000;
        this.query.endTime = new Date(this.form.reportTime[1]).getTime() / 1000;
      }
      this.getQueryAllListData(this.query);
    },

    clearQuery() {
      this.query = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        sourceCode: "",
        caseCode: "",
        categoryDcaCode: "",
        categorySupCode: "",
        categorySubCode: "",
        overFlag: null,
        status: 0,
        id: "",
        beginTime: "",
        endTime: "",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.overFlagBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.supervise {
  cursor: pointer;
}
.overFlagBox img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
/deep/ .pagination-container {
  padding: 0 16px;
  margin-top: 10px;
}
</style>
